<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="秒杀规则" prop="seckillRule">
        <el-input
          type="textarea"
          :rows="2"
          autosize
          maxlength="500"
          show-word-limit
          placeholder="请输入秒杀规则"
          v-model="form.seckillRule">
        </el-input>
      </el-form-item>


      <el-row :gutter="30">
        <el-col :span="12" v-for="(item, index) in form.hours" :key="item.time">
          <el-form-item label="场次"  >
            <el-time-select
              v-model="item.time"
              :picker-options="{
                start: '00:00',
                step: '00:10',
                end: '23:50'
              }"
              placeholder="选择时间">
            </el-time-select>
            <el-button
              style="margin-left: 10px"
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              v-show="form.hours.length > 1"
              @click="removeDomain(item, index)"
            >删除</el-button>

            <el-button @click="addJWItem" type="primary" icon="el-icon-add" v-show="index == form.hours.length -1"
            >新增</el-button>
          </el-form-item>

        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>注意</span>
      </div>
      <p>1、积分设置不允许出现负数</p>
      <p>2、请确保设置正确，以免业务逻辑出错</p>
    </el-card>
  </div>
</template>

<script>
import { getSettingByKey, updateSetting } from '@/api/sysSet/setting'
import form from "@/views/sysSet/flowable/form/index.vue";

export default {
  name: 'SECKILL_CONFIG',
  dicts: ['sys_yes_no'],
  data() {
    return {
      configName: '秒杀配置',
      configKey: 'seckill_config',
      // 表单参数
      form: {
        hours: [],
        seckillRule: ""
      },
      settingForm: {
        configName: '秒杀配置',
        configKey: 'seckill_config',
        configType: 'N',
        configValue: ''
      },
      // 表单校验
      rules: {
        min: [
          {required: true, message: "密码不能为空", trigger: "change"}
        ],
        fee: [
          {min: 0,max:999,message:"提现手续费介于0 到 999 之间",trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    /** 查询参数配置列表 */
    getConfig() {
      getSettingByKey(this.configKey).then(response => {
        this.settingForm = response.data
        let configValue = response.data.configValue
        console.log(configValue)
        if (!configValue) {
          this.reset()
        } else {
          this.form = JSON.parse(configValue)
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        hours: [],
        seckillRule: ""
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(JSON.stringify(this.form))
          this.settingForm.configValue = JSON.stringify(this.form)
          updateSetting(this.settingForm).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.getConfig()
          })
        }
      })
    },
    // 新增经纬度表单项
    addJWItem() {
      this.form.hours.push(
        {time: "00:00"}
      )
    },
    // 点击删除经纬度项
    removeDomain(item, index) {
      const itemList = this.form.hours.indexOf(item)
      if (itemList !== -1) {
        this.form.hours.splice(index, 1)
      }
    },
  }
}
</script>

<style>
.box-card{
  margin-top: 20px;
}
</style>
